<template>
  <el-row>
    <el-col>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="部门名称">
          <SearchInput :data="allData" keyword="deptName" label="请输入部门名称" :getText="selectDeptName"></SearchInput>
        </el-form-item>
        <el-form-item label="领导者">
          <SearchInput :data="allData" keyword="leader" label="请输入领导用户名" :getText="selectLeader"></SearchInput>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="状态筛选" v-model="searchText.status">
            <el-option label="全部" value="null"></el-option>
            <el-option label="停用" value="1"></el-option>
            <el-option label="未停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="searchDept">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="reset" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <el-button type="success" :icon="Plus" @click="addDialog = true">新增</el-button>
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      &nbsp;
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <el-table :data="data"
                style="width: 100%"
                row-key="id"
                header-cell-style="background:#f8f8f9;color:#535a6c"
                :default-expand-all="expandAll"
      >
        <el-table-column prop="id" label="部门编号" width="180"/>
        <el-table-column prop="deptName" label="部门名称" width="180"/>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <StatusTag :status="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column prop="leader" label="领导者">
          <template #default="scope">
            <UserNameById :id="scope.row.leader"/>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="200"/>
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template #default="scope">
            <el-button-group class="ml-4">
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="添加子部门"
                  placement="top"
              >
                <el-button type="success" :icon="Plus" size="small" @click="addChild(scope.row.id)"></el-button>
              </el-tooltip>
              <template v-if="scope.row.id===1?false:true">
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="编辑此部门"
                    placement="top"
                >
                  <el-button type="primary" :icon="Edit" size="small" @click="update(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="删除此部门"
                    placement="top"
                >
                  <el-button :icon="Delete" type="danger" size="small" @click="fakeDelete(scope.row.id)"></el-button>
                </el-tooltip>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="停用此部门"
                    placement="top"
                >
                  <el-button type="warning" size="small" :icon="Remove"></el-button>
                </el-tooltip>
              </template>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-dialog v-model="addDialog" title="添加部门信息" width="400px" center>
    <AddDept></AddDept>
  </el-dialog>


  <el-dialog v-model="addChildrenDialog" title="添加部门信息" width="400px" center>
    <AddDept :parent-id="parentId"></AddDept>
  </el-dialog>


  <!--  {{ data }}-->
</template>
<script setup>
import {Edit, Delete, Plus, Remove, Refresh, Search} from "@element-plus/icons-vue";
import AddDept from "@/view/dept/AddDept";
import UserNameById from "@/components/user/UserNameById";
import SearchInput from "@/components/search/SearchInput";
</script>
<script>
import {getAllDept, deptChildRecursion, fakeDeleteDept} from "@/api/dept";
import StatusTag from "@/components/table/StatusTag";

const {ElMessage} = require("element-plus");
export default {
  name: "DeptPage",
  components: {StatusTag},
  data() {
    return {
      update: false,
      parentId: -1,
      data: '',
      allData: '',
      expandAll: 'default-expand-all',
      addDialog: false,
      addChildrenDialog: false,
      searchText: {
        deptName: '',
        leader: '',
        status: ''
      },
      dept: '',
    }
  },
  mounted() {
    this.getDept();
  },
  methods: {
    update(dept) {
      this.update = true
      this.dept = dept
    },
    selectLeader(text) {
      this.searchText.leader = text
    },
    async searchDept() {
      console.log(this.searchText)
    },
    selectDeptName(text) {
      this.searchText.deptName = text
    },
    addChild(id) {
      this.parentId = id
      this.addChildrenDialog = true;
    },
    async fakeDelete(id) {
      const t = await fakeDeleteDept(id);
      if (t.data.code === 200) {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
      }
    },
    async getDept() {
      //8080/dept/dept-getAll
      const t = await getAllDept();
      const w = await getAllDept();
      this.allData = w.data.data
      const a = await deptChildRecursion(t.data.data)
      this.data = a;
    },
    expand() {
      this.expandAll = this.expandAll === 'default-expand-all' ? '' : 'default-expand-all';
    }
  },
  computed: {
    getData() {
      this.getDept()
      return this.data;
    }
  }
}
</script>
<style scoped>
</style>

